<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>熊猫优选</title>
    <link rel="stylesheet" href="./libs/swiper.min.css">
    <link rel="stylesheet" href="http://at.alicdn.com/t/font_2700259_6thcbwzyzke.css">
    <link rel="stylesheet" href="./css/index.css">
    <link rel="stylesheet" href="./css/footer.css">
    
    <script src="./libs/require.js" data-main="./js/index.js"></script>
</head>
<body>
    <header></header>
    <div class="banner">
        <ul class="main tabs">
            <li class="active">首页</li>
            <li>9块9包邮</li>
            <li>超值大额劵</li>
            <li>夏季女装上新</li>
        </ul>
    </div>
    <div class="side-bar">
        <div class="cart"> <a href="./html/cart.html"><i class="iconfont icon-gouwuche"></i></a></div>
    </div>
    <div class="innerBanner main">
        <ul class="left">
            <li>
                <img src="./images/list1.png" alt=""> <span>女装/女鞋</span>
            </li>
            <li><img src="./images/list2.png" alt=""> <span>男装/男鞋</span></li>
            <li><img src="./images/list3.png" alt=""> <span>美妆/个护</span></li>
            <li><img src="./images/list4.png" alt=""> <span>配饰/箱包</span></li>
            <li><img src="./images/list5.png" alt=""> <span>零食王国</span></li>
            <li><img src="./images/list6.png" alt=""> <span>母婴用品</span></li>
            <li><img src="./images/list7.png" alt=""> <span>手机/数码</span></li>
            <li><img src="./images/list8.png" alt=""> <span>内衣袜子</span></li>
            <li><img src="./images/list9.png" alt=""> <span>文娱/家居</span></li>
            <div></div>
        </ul>
        <div class="right">
            <div class="r-top">
                <div class="swiper-container">
                    <div class="swiper-wrapper">
                        <div style="background-color:pink;" class="swiper-slide">
                            <img src="./images/Lunbo1.jpeg" alt="">
                        </div>
                        <div style="background-color:skyblue;" class="swiper-slide">
                            <img src="./images/Lunbo2.jpeg" alt=""></div>
                        <div style="background-color:plum;" class="swiper-slide">
                            <img src="./images/Lunbo1.jpeg" alt=""></div>
                        <div style="background-color:coral;" class="swiper-slide">
                            <img src="./images/Lunbo2.jpeg" alt="">
                        </div>
                        
                    </div>
                    <!-- 如果需要分页器 -->
                    <div class="swiper-pagination"></div>
                    <!-- 如果需要导航按钮 -->
                    <div class="swiper-button-prev"></div>
                    <div class="swiper-button-next"></div>
                </div>
                <div class="r-top-2">
                    <h3>9块9包邮</h3>
                    <div class="text">保你不吃亏</div> 
                    <img src="./images/des1.gif" alt="">               
                </div>
            </div>
            <div class="r-bottom">
                <div class="r-bottom-1">
                    <h3>夏季女装上新</h3>
                    <p>速来抢购</p>
                    <span>Go</span>
                    <img src="./images/bg1.png" alt="">
                </div>
                <div class="r-bottom-2">
                    <h3>超值大额劵</h3>
                    <p>优惠直击底价</p>
                    <span>Go</span>
                    <img src="./images/bg2.png" alt="">
                </div>
                <div class="r-bottom-3">
                    <p>扫码下载APP</p>
                    <p>发现更多惊喜</p>
                    <img src="./images/bg3.png" alt="">
                </div>
            </div>
        </div>
    </div>

    <div class="title-bar">小编精选</div>
    <div class="list main">
        <ul></ul>
    </div>

    <div class="more">更多</div>
    <footer></footer>

    
    <script type="text/html" id='list'>
        {{each products prod}}
            <li class="item" data-id="{{prod.id}}">
                <a href="./html/des.html" target="_blank"><img class="image" src="{{prod.image}}" alt=""></a>
                <div class="text">
                    <p class="title">{{prod.qunTitle}}</p>
                    <div>
                        <span>淘宝</span>
                        <span>包邮</span>
                    </div>
                    <div>
                        <div>
                            <span>￥</span>
                            <span class="price">{{prod.price}}</span>元
                            
                            <span class="saleNum">{{prod.saleNum}}人已买</span>
                        </div>
                        <span class="couponValue">{{prod.couponValue}}</span>
                    </div>
                </div>
                <button class="add-to-cart">加入购物车</button>
            </li>
        {{/each}}
    </script>
</body>
</html>